<template>
  <div class="wrap">
  		<!-- footer -->
  		<headerV></headerV>
  		
		<!-- content -->
		<div class="index-content">
			<div class="about">
				<div class="title">
					<h2>关于我们</h2>
					<p>ABOUT US</p>
				</div>
				<div class="about_content">
					<p>拥有自己的样照研发团队，不仅在迎合时下喜欢自然、崇尚个性、追求真我的新人们的需求，从独特的角度去诠释爱情、诠释婚纱照的幸福画面。某某婚纱摄影坐落于某某湖畔，拥有奢华室内主题摄影和某某市得天独厚的外景成立至今，技术实力过硬，服务品质上佳......</p>
					<div class="about_next">
						<router-link to=""><img src="../assets/3.jpg" /></router-link>
					</div>
				</div>
			</div>
			
			<div class="Photography">
				<div class="title">
					<h2>摄影展示</h2>
					<p>PHOTOGRAPHY SHOW</p>
				</div>
				<div>
					<div class="Photo_content">
						<p>某某婚纱摄影，一个亲切而带有丝丝浪漫的名字。 </p>
						<p>某某婚纱摄影，一个朝气而又富有创新精神的团队。</p>
						<p>某某婚纱摄影，一个提供精致服务的高端影像机构。</p>
					</div>
					<div class="classify">
						<ul>
							<li>
								<router-link to=""><img src="../assets/6_niwi.png" alt="" /></router-link>
								<strong>婚纱摄影</strong>
							</li>
							<li>
								<router-link to=""><img src="../assets/7_9dxs.png" alt="" /></router-link>
								<strong>婚纱摄影</strong>
							</li>
							<li>
								<router-link to=""><img src="../assets/8_c9vk.png" alt="" /></router-link>
								<strong>婚纱摄影</strong>
							</li>
							<li>
								<router-link to=""><img src="../assets/9_d5l7.png" alt="" /></router-link>
								<strong>婚纱摄影</strong>
							</li>
						</ul>
					</div>
				</div>
			</div>
				
			<div class="news">
				<div class="title">
					<h2>新闻中心</h2>
					<p>NEWS CENTER</p>
				</div>
				<div class="news_content">
					<p class="desc">非凡创作，匠心独运，打造赏心悦目的精心杰作</p>
						<ul>
							<li>
								<img src="../assets/5_ort6.jpg" alt="" />
								<div class="con">
									<router-link to="">影响婚纱照拍摄的因素......</router-link>
									<p class="time">2017-09-05</p>
									<p class="desc">新人在选择婚纱摄影工作室拍摄婚纱照的时候......</p>
								</div>
							</li>
							<li>
								<img src="../assets/1_i3o5.jpg" alt="" />
								<div class="con">
									<router-link to="">婚纱照怎么拍摄才能更......</router-link>
									<p class="time">2017-09-05</p>
									<p class="desc">每一位新人在拍摄婚纱照的时候都希望能够拍......</p>
								</div>
							</li>
							<li>
								<img src="../assets/2_0oqr.jpg" alt="" />
								<div class="con">
									<router-link to="">婚纱摄影工作室哪家好</router-link>
									<p class="time">2017-09-05</p>
									<p class="desc">新人在拍摄婚纱摄影的时候都会很头疼一个问......</p>
								</div>
							</li>
						</ul>
						<router-link to="" class="btn"><img src="../assets/3.jpg" alt="" /></router-link>
				</div>
			</div>
				
			<div class="team">
				<div class="title">
					<h2>团队介绍</h2>
					<p>TEAM INTRODUCTION</p>
				</div>
				<div>
					<ul>
						<li>
							<img src="../assets/12.png" alt="" />
							<div class="desc">
								<strong>张某某 / MICK</strong>
								<p>时尚摄影师</p>
							</div>
						</li>
						<li>
							<img src="../assets/13.png" alt="" />
							<div class="desc">
								<strong>艾伦 / Aaron</strong>
								<p>化妆师</p>
							</div>
						</li>
						<li>
							<img src="../assets/15.png" alt="" />
							<div class="desc">
								<strong>周某 / Evan</strong>
								<p>时尚摄影师</p>
							</div>
						</li>
						<li>
							<img src="../assets/14.png" alt="" />
							<div class="desc">
								<strong>彭某 / Gary</strong>
								<p>时尚摄影师</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			
			<div class="contact">
				<div class="title">
					<h2>联系我们</h2>
					<p>CONTACT US</p>
				</div>
				<div class="contact_content">
					<p>非凡创作，匠心独运，打造赏心悦目的精心杰作</p>
					<div class="map">
						<iframe src="public/map.vue" width="300px" height="141px" frameborder="0"></iframe>
					</div>
					<div class="con">
						<p>地址:上海某某某某路2号某某广场1楼 1009-1010室 </p>
						<p>电话:021-8888XXXX</p>
						<p>传真:021-8888XXXX</p>
						<p>邮箱：XXXXXXXX@XX..com</p>
						<p>邮编：622XXX</p>
					</div>
				</div>
			</div>
		</div>
	
  	<!-- footer -->
  	<footerV></footerV>
  </div>
</template>

<script>
import footer from './public/footer'
import header from './public/header'
export default {
	components: {
		footerV : footer,
		headerV : header
	},
	data () {
		return {
			
		}
	},
	methods : {
		
	}
}
	
</script>


<style type="text/css" scoped="scoped">
	/* index.style */
	.about{	overflow: hidden;}
	.about_content>p{line-height: 0.24rem; color: #666; padding: 0 0.1rem 0.2rem;}
	.about_content .about_next{width:100%; height:1.4rem; text-align: center; background: url(../assets/2.jpg) center center no-repeat; background-size: 100% 4.48rem;}
	.about_content .about_next img{width:1.7rem; height:0.38rem; margin-top: 0.5rem;}
	
	.Photography{overflow: hidden;}
	.Photography .title{background: rgb(55, 50, 57);}
	.Photography .Photo_content{background: rgb(55, 50, 57); color:#999; text-align: center; padding: 0.1rem 0 0.5rem; line-height: 0.25rem;}
	.Photography .classify{background: url(../assets/2_r703.jpg) center center no-repeat; overflow: hidden; width:100%; height: 3.06rem; background-size:100% 3.6rem;}
	.classify ul{border-radius: 0.03rem; width:2.97rem; height: 2.27rem; -webkit-box-shadow: rgba(0,0,0,0.6) 0px 1px 4px 0px; box-shadow: rgba(0,0,0,0.6) 0px 1px 4px 0px; background: #fff; margin: 0.35rem 0.1rem; text-align: center;}
	.classify ul li{	width:49%; float:left; margin-top: 0.22rem;}
	.classify ul img{width:0.46rem; height:0.46rem;}
	.classify ul strong{display: block; font-size: 0.14rem;}
	.classify ul strong:before{content: " "; display: block; width:0.3rem; height:0.03rem; background:#434343; margin:0.05rem auto;}
	
	.news{overflow: hidden; padding: 0 0.08rem;}
	.news_content>p{text-align: center;color: #5a5a5a; margin-bottom: 0.3rem;}
	.news_content li{	border-bottom: 1px solid #e2e2e2; margin-bottom: 0.1rem; padding-bottom: 0.1rem; overflow: hidden;}
	.news_content li img{width:0.8rem; height:0.71rem; float: left; margin-right: 0.06rem;}
 	.news_content .con a{color:#5a5a5a;}
 	.news_content .con .time{color: #929292; line-height: 0.25rem;	}
 	.news_content .con .desc{color: #5A5A5A;}
 	.news_content .btn {overflow: hidden; text-align: center; display:block; margin-bottom: 0.3rem;} 
 	.news_content .btn img{width:1.43rem; height:0.31rem; }
 	
 	.team{background: url(../assets/3_aw6t.jpg) center center no-repeat; background-size:100% 100%; overflow: hidden; text-align: center;}
 	.team li{width:50%; overflow: hidden; float:left; margin-bottom: 0.3rem;}
 	.team li img{width:0.79rem; height: 0.8rem; margin-bottom: 0.06rem;}
 	.team li .desc{color: rgb(204, 204, 204);}
 	.team li strong{font-size: 0.14rem; line-height: 0.22rem;}
 	.team li p:after{display: block; content: " "; widtH:0.38rem; height: 0.03rem; background:#ebe81f; margin:0.06rem auto;}
 	
 	.contact .contact_content>p{text-align: center;color: #5a5a5a; margin-bottom: 0.4rem;}
 	.contact .contact_content .con{padding:0 0.1rem; color: #5A5A5A; line-height: 0.4rem; overflow: hidden; width: 100%;}
 	.contact .map{height:1.5rem;border:0.01rem solid rgb(204, 204, 204); padding-top: 0.1rem;	}
 	.contact .map iframe{margin: 0 auto; display: block; border:none; width:3rem; height:1.41rem;}
</style>
